<template>
  <div class="new-song-list">
    <van-popup
        class="flex flex-col items-center yu-bgColor-tew-only"
        :class="store.isFlag ? 'w-1/3 h-1/3' : 'w-3/4'"
        :style="store.isFlag ? '' : 'height: 200px'"
        round
        v-model:show="store.newSongListPopup"
    >
      <h3 class=" w-full h-10 m-0 flex items-center yu-color-text justify-center">新建歌单</h3>
      <div class="w-full mt-2">
        <van-field  v-model="nameValue" placeholder="请输入歌单名称" />
      </div>
      <div class="mt-10">
        <van-button type="primary" :loading="loadingBtn" round color="linear-gradient(to right, #ff6034, #ee0a24)"  @click="getPlaylistCreateA">新建歌单</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {ref} from "vue";
// pinia
import {useStore} from "@/store/index"
// api
import { getPlaylistCreate } from "@/api/login/index"

const store = useStore()
// 歌单名称
const nameValue = ref('')
// 添加加载按钮loading
const loadingBtn = ref(false)

// 传值到父组件
const $emit = defineEmits(['newAddMusic'])
// 创建歌单, 在存在id的情况先需要创建歌单时把歌曲也添加到这个歌单
const getPlaylistCreateA = () => {
  if (nameValue.value) {
    loadingBtn.value = true
    getPlaylistCreate({ name: nameValue.value }).then(res => {
      const { code, id } = res
      if (Number(code) === 200) {
        $emit('newAddMusic', id)
      }
      nameValue.value = ''
      loadingBtn.value = false
    })
  }
}


</script>

<style scoped>

</style>
